<template>
    <div class="container" @click="detail(item.id)">
        <img :src="item.images.small" class="img">
        <div class="info">
            <p class="title">{{item.title}}</p>
            <p class="point" v-if="item.rating.average!==0">观众评分：<span class="num">{{item.rating.average}}</span></p>
            <div class="des">
                <p class="actors">主演：{{item.casts | formatName}}</p>
                <p class="durations">时长：{{item.durations[0]}}</p>
            </div>
        </div>
        <div class="buy">
            购票
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            item:{
                type:Object
            }
        },
        filters:{
            formatName(arr){
               return arr.map(item=>{
                    return item.name
                }).join(" ");
            }
        },
        methods:{
            detail(id){
                this.$router.push(`/films/${id}`);
            }
        }
    }
</script>

<style scoped>
    .container{
        padding: 15px;
        overflow: hidden;
        border-bottom: 1px solid #ededed;
        position: relative;
    }
    .img,.info{
        float: left;
        height: 94px;
    }
    .info{
        padding: 6px 10px;
        width: 219px;
        position: relative;
    }
    .title{
        font-size: 16px;
        color: #191a1b;
    }
    .des{
        font-size: 13px;
        color: #797d82;
        padding-top: 25px;
    }
    .actors{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }
    .point{
        position: absolute;
        left: 10px;
        top: 30px;
        font-size: 13px;
        color: #797d82;
    }
    .num{
        color: #ffb232;
        font-size: 14px;
    }
    .buy{
        float: right;
        font-size: 13px;
        width: 40px;
        color: #ff5f16;
        font-size: 13px;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #ff5f16;
        position: absolute;
        right: 15px;;
        top: 40%;
        height: 25px;
        line-height: 25px;
    }
</style>